<div class="layui-card-header">
    <h2 class="header-title">修改密码</h2>
</div>
<div class="layui-card-body" style="padding: 30px;">
    <form class="layui-form" id="form-password">
        <div class="layui-form-item">
            <input type="password" name="oldPassword" required lay-verify="required|password" class="layui-input"
                   placeholder="请输入原密码" lay-verType="tips"/>
        </div>
        <div class="layui-form-item">
            <input type="password" name="newPassword" required lay-verify="required|password" class="layui-input"
                   placeholder="请输入新密码" lay-verType="tips"/>
        </div>
        <div class="layui-form-item">
            <input type="password" name="rePassword" required lay-verify="required|repassword" class="layui-input"
                   placeholder="再次输入新密码" lay-verType="tips"/>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="submit-psw">确认修改</button>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'crown', 'config'], function () {
        var form = layui.form;
        var crown = layui.crown;
        var config = layui.config;
        //监听提交
        form.on('submit(submit-psw)', function (data) {
            layer.load(2);
            crown.put('/api/account/password', data.field, function () {
                layer.closeAll('loading');
                crown.closePopupRight();
                layer.msg('密码修改成功，请重新登录', {icon: 1}, function () {
                    config.removeAll();
                    location.href = '/login.html';
                });
            });
            return false;
        });

        //添加表单验证方法
        form.verify({
            password: [/^[\S]{5,12}$/, '密码必须5到12位，且不能出现空格'],
            repassword: function (t) {
                if (t !== $('#form-password input[name=newPassword]').val()) {
                    return '两次密码输入不一致';
                }
            }
        });
    });
</script>